<template>
  <div class="add-container">
    <el-form :model="form" ref="addForm" :rules="rules" :label-width="80">
        <el-form-item prop="nickname" label="姓名">
          <el-input size="large" v-model="form.nickname">
          </el-input>
        </el-form-item>
        <el-form-item prop="sex" label="性别">
          <el-select
              v-model="form.sex"
              clearable
              size="large"
            >
              <el-option
                v-for="item in sexArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
    </el-select>
        </el-form-item>
        <el-form-item prop="grade" label="班级">
          <el-input size="large" v-model="form.grade">
          </el-input>
        </el-form-item>
        <el-form-item prop="phone" label="电话">
          <el-input size="large" v-model="form.phone">
          </el-input>
        </el-form-item>
         <el-form-item prop="QQ" label="QQ">
            <el-input size="large" v-model="form.QQ">
            </el-input>
          </el-form-item>
    </el-form>
  </div>
  <div class="dialog-footer">
    <el-button @click="cancleHandle">取消</el-button>
    <el-button type="primary" @click="saveHandle(addForm)">
      确定
    </el-button>
  </div>
</template>

<script setup lang="ts" name="AddDialog">
  interface StudentMode {
    id: string,
    studentNumber: string,
    nickname: string,
    sex: number,
    grade: string
    phone?: string,
    QQ?: string,
  }

  const sexArr = [
    {
      label: '男',
      value: 1
    },
    {
    label: '女',
    value: 0
  },
  ]

  import { reactive, ref, onMounted } from 'vue'
  import type { FormRules, FormInstance } from 'element-plus';
  import { ElMessage } from 'element-plus'

  const props = defineProps({
    editForm: {
      type: Object,
      required: true
    }
  })

  const emit = defineEmits(['closeDialog']);

  const form = reactive<StudentMode>({});

  const addForm = ref<FormInstance>()

  const rules = reactive<FormRules<StudentMode>>({
    nickname: [
      {
        required: true,
        message: '请输入名称',
        trigger: 'blur'
      }
    ],
    sex: [
      {
        required: true,
        message: '请选择性别',
        trigger: 'change'
      }
    ],
    grade: [
      {
        required: true,
        message: '请输入班级',
        trigger: 'blur'
      }
    ]
  })

  // 取消
  const cancleHandle = () => {
    if(addForm.value) {
      addForm.value.clearValidate();
      emit('closeDialog', false)
    }
  }

  const saveHandle = async (formE: FormInstance | undefined) => {
     if (!formE) return;
     await formE.validate(valid => {
    if (valid) {
      ElMessage({
        message: '操作成功',
        type: 'success',
      });
      emit('closeDialog', form);
    }
  })
  }

  onMounted(() => {
    if (props.editForm) {
      Object.assign(form, { ...props.editForm })
    }
  })
</script>

<style lang="scss" scoped>
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>
